<template>
  <div class="container">
    <child3>
      <!-- 通过给调用标签中使用slot属性来指定，具名插槽 -->
      <h1 slot="header">child3的头部</h1>
      <!-- 在自定义组件标签内完成显示内容自定义，通过插槽 slot -->
      <h3>我是中间的自定义内容</h3>
    </child3>
    <hr />
    <child3>
      <h3 slot="header">---- child3的头部</h3>
      <div slot-scope="scope">我是内容区域---{{scope.title}}</div>
    </child3>
  </div>
</template>

<script>
import child3 from "./components/child3";
export default {
  data() {
    return {};
  },
  components: {
    child3,
  },
};
</script>

<style lang='scss' scoped>
.container {
}
</style>